<template>
  <div class="tabControl">
    <div v-for="(item,index) in title" :key="index" class="tabControl-item"
    :class="{getColor:index===isColor}" @click="isChange(index)">
      <span>{{item}}</span>
    </div>
  </div>

</template>

<script>
export default {
name:'TabControl',
props:{
  title:{
    type:Array,
    default(){
      return []
    }
  }
},
data(){
  return {
    isColor:0
  }
},
methods:{
isChange(index){
  this.isColor=index
  this.$emit('GoodsClick',index)
}
}
}
</script>

<style>
.tabControl{
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align:center;
  background-color: #fff;
}
.tabControl-item{
  flex:1
}
.tabControl-item span{
  padding: 5px;
}
.getColor{
  color: var(--color-high-text);

}
.getColor span{
  border-bottom:3px solid var(--color-tint);
}

</style>